<template>
    <div class="add-patient-page">
        <page-header title="添加就诊人" />

        <div class="page-content">
            <van-form @submit="onSubmit">
                <van-cell-group inset>
                    <van-field v-model="form.name" name="name" label="姓名" placeholder="请输入姓名"
                        :rules="[{ required: true, message: '请输入姓名' }]" />

                    <van-field v-model="form.idCard" name="idCard" label="身份证号" placeholder="请输入身份证号" :rules="[
                        { required: true, message: '请输入身份证号' },
                        { validator: validateIdCard, message: '请输入正确的身份证号' }
                    ]" />

                    <van-field name="gender" label="性别">
                        <template #input>
                            <van-radio-group v-model="form.gender" direction="horizontal">
                                <van-radio name="male">男</van-radio>
                                <van-radio name="female">女</van-radio>
                            </van-radio-group>
                        </template>
                    </van-field>

                    <van-field v-model="form.phone" name="phone" label="手机号" placeholder="请输入手机号" :rules="[
                        { required: true, message: '请输入手机号' },
                        { validator: validatePhone, message: '请输入正确的手机号' }
                    ]" />

                    <van-field v-model="form.age" name="age" label="年龄" type="number" placeholder="请输入年龄"
                        :rules="[{ required: true, message: '请输入年龄' }]" />

                    <van-field name="relation" label="与本人关系">
                        <template #input>
                            <van-dropdown-menu :overlay="false" active-color="#1989fa">
                                <van-dropdown-item v-model="form.relation" :options="relationOptions" />
                            </van-dropdown-menu>
                        </template>
                    </van-field>
                </van-cell-group>

                <div class="default-patient">
                    <van-checkbox v-model="form.isDefault">设为默认就诊人</van-checkbox>
                </div>

                <div class="submit-btn">
                    <van-button round block type="primary" native-type="submit" :loading="loading">
                        保存
                    </van-button>
                </div>
            </van-form>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { showToast } from 'vant';
import PageHeader from '@/components/common/PageHeader.vue';
import { isValidIdCard, isValidPhone } from '@/utils/validate';
import { addPatient } from '@/services/appointment.service';

const router = useRouter();
const loading = ref(false);

// 表单数据
const form = ref({
    name: '',
    idCard: '',
    gender: 'male',
    phone: '',
    age: '',
    relation: '本人',
    isDefault: false,
});

// 关系选项
const relationOptions = [
    { text: '本人', value: '本人' },
    { text: '父母', value: '父母' },
    { text: '配偶', value: '配偶' },
    { text: '子女', value: '子女' },
    { text: '其他', value: '其他' },
];

// 验证身份证
const validateIdCard = (val: string) => isValidIdCard(val);

// 验证手机号
const validatePhone = (val: string) => isValidPhone(val);

// 提交表单
const onSubmit = async () => {
    loading.value = true;
    try {
        // 模拟添加成功
        await new Promise(resolve => setTimeout(resolve, 1000));

        // 真实项目中应调用API
        // const patientData = {
        //   name: form.value.name,
        //   idCard: form.value.idCard,
        //   gender: form.value.gender,
        //   phone: form.value.phone,
        //   age: parseInt(form.value.age as string),
        //   relation: form.value.relation,
        //   isDefault: form.value.isDefault
        // };
        // await addPatient(patientData);

        showToast('添加成功');
        setTimeout(() => {
            router.back();
        }, 1000);
    } catch (error) {
        console.error('添加就诊人失败:', error);
        showToast('添加失败，请重试');
    } finally {
        loading.value = false;
    }
};
</script>

<style scoped lang="scss">
.add-patient-page {
    min-height: 100vh;
    background-color: #f5f5f5;
    padding-top: 46px; // 为顶部导航栏预留空间

    .page-content {
        padding: 16px;
    }

    .default-patient {
        margin: 20px 16px;
    }

    .submit-btn {
        margin: 24px 16px;

        .van-button {
            height: 44px;
            font-size: 16px;
        }
    }

    :deep(.van-dropdown-menu) {
        height: 24px;
        background-color: transparent;
        box-shadow: none;
    }

    :deep(.van-dropdown-item__title) {
        justify-content: flex-start;
    }
}
</style>